<template>
  <div class="viewer-wrapper">
    <div class="player">
      <canvas ref="canvas" :width="width" :height="height"></canvas>
    </div>
    <div class="control-bar">
      <i
        v-for="btn in btns"
        :key="btn.id"
        class="clickable-icon"
        :class="btn.icon"
        :title="btn.name"
        @click="handleClick(btn)"></i>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePlayer } from '@/composables/player';
import { useToolbar } from '@/composables/toolbar';

const { btns, handleClick } = useToolbar()
const { width, height, canvas } = usePlayer()

</script>

<style lang="stylus" scoped>
.viewer-wrapper
  position: absolute;
  right: 0;
  bottom: 240px;
  width: 640px;
  height: 400px;
  background: #000;
  color: #fff;
  .player 
    width: 640px;
    height: 360px;
  .control-bar
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    background: #333;
    height: 40px;
.clickable-icon
  color $btnColor
  cursor pointer
  width 30px
.clickable-icon:hover
  color $btnActiveColor
</style>